<template>
	<div id="index">
    <!-- 百度地图插件 -->
    <div v-if="isShow">
      <baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
          <template v-for="(item,index) in location">
            <bm-marker :key="index" :position="item.location" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
          </template>
        <!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"></bm-geolocation> -->
      </baidu-map>
    </div>
    <!-- <div v-else>
      <baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handlers" :scroll-wheel-zoom="true">
          <template v-for="(item,index) in locations">
            <bm-marker :key="index" :position="item.location" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
          </template>
      </baidu-map>
    </div> -->
	</div>
</template>

<script>
// 导入插件,按需引入
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import {BmMarker} from 'vue-baidu-map'
import {getpropertiesById} from '@/api/properties'

export default {
	components: {
		BaiduMap,
    BmMarker,
    // BmGeolocation
	},
	data() {
		return {
      isShow: false,
      id:this.$route.query.id, // 详情页id
			ak: 'Qwl0VHyDS8nPhhhrrkvGGlzDSxRQ5qxR', // 密钥
			center: { lng: 0, lat: 0 }, 
			zoom: 0,
      location:[], // 点覆盖经纬度
      // locations:[
      //   {location: {lng: '113.27324', lat: '23.15792'}}
      // ], // 点覆盖经纬度
      searchData:{ // 搜索地址
        query: '',
        region: '广州市天河区',
        ak: 'Qwl0VHyDS8nPhhhrrkvGGlzDSxRQ5qxR'
      }
		}
	},
	async created () {
   const {data}=  await getpropertiesById(this.id) // 获取详情地址
   this.searchData.query = data.address
   this.address()
  },
	mounted() {
  },
	methods: {
    // handlers({ BMap, map }) {
    //   console.log(BMap, map)
    //   this.center.lng = 113.27324
    //   this.center.lat = 23.15792
    //   this.zoom = 10
    // },
    handler({ BMap, map }) {
      console.log(BMap, map)
      // this.center.lng = 113.27324
      // this.center.lat = 23.15792
      this.center.lng = this.location[0].location.lng
      this.center.lat = this.location[0].location.lat
      this.zoom = 10
    },
    // 搜索功能
    async address(){
      // 百度api
      let url = 'https://api.map.baidu.com/place/v2/suggestion?query='+ this.searchData.query + '&region=' + this.searchData.region + '&output=json&ak=' +this.searchData.ak
      // this.$jsonp(url).then(res => {
      //  this.location = res.result
      //  this.isShow = true
      // }).catch(err =>{
      //   console.log(err);
      // })
       try {
         const res = await this.$jsonp(url)
         this.location = res.result
         this.isShow = true
       } catch (error) {
         console.log(error);
       }
    },
	}
}
</script>

<style lang="less" scoped>
.map{
	width: 260px;
	height: 180px;
}
</style>